<template>
  <el-dialog :title="title" v-model="_show" width="921px" :before-close="handleClose">
    <div class="moduleBox">
      <div v-for="(item, index) in dataObj.list" :key="index" class="module">
        <div class="module-title">{{ item.title }}</div>
        <div class="module-body">
          <div v-if="item.custom" class="unit">
            <span v-for="(it, i) in item?.info || []" :key="i" class="label">{{ it }}</span>
          </div>
          <div v-else class="info">
            <div class="info-item" v-for="(it, i) in item?.info || []" :key="i">
              <div class="label">{{ it.label }}：</div>
              <div class="value">{{ it.value }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, watch, computed, inject, reactive } from 'vue'
const emit = defineEmits(['update:show'])
const props = defineProps({
  show: Boolean,
  data: Object,
})
const $http = inject('$http')

const dataObj = reactive({
  list: [],
})

const _show = ref(props.show)

const title = computed(() => {
  const { title = '' } = getDetailLevelInfo() || {}

  return title
})

watch(
  () => props.show,
  () => {
    _show.value = props.show
    getMapDetailInfo()
  }
)

const handleClose = () => {
  _show.value = false
  emit('update:show', _show.value)
}

function getDetailLevelInfo() {
  const { level = '', townName = '', villageName = '' } = props.data || {}

  switch (level) {
    case 'town':
      return {
        title: townName,
        params: {
          townName,
        },
        level: '乡镇',
      }
    case 'village':
      return {
        title: villageName,
        params: {
          villageName,
        },
        level: '村',
      }
    default:
      return {
        title: '详情',
        params: {},
        level: '',
      }
  }
}

function getMapDetailInfo() {
  if (!props.show) return

  dataObj.list = []

  const { params = {} } = getDetailLevelInfo() || {}

  $http.get('/screen/district/stat', { params }).then(res => {
    const { data = {} } = res || {}
    const {
      czTotal = 0,
      fczTotal = 0,
      placeTotal = 0,
      scanTotal = 0,
      fxrs = 0,
      tsrq = 0,
      zdry = 0,
      hsTotal = 0,
      hsPercent = 0,
      yxry = 0,
      children = [],
    } = data || {}
    const { level = '' } = getDetailLevelInfo() || {}

    dataObj.list = [
      {
        title: '数据概览',
        info: [
          {
            label: '常住人口',
            value: czTotal || 0,
          },
          {
            label: '非常住人口',
            value: fczTotal || 0,
          },
          {
            label: '区划级别',
            value: level,
          },
          {
            label: '场所数量',
            value: placeTotal || 0,
          },
          {
            label: '今日扫码',
            value: scanTotal || 0,
          },
        ],
      },
      {
        title: '人群信息',
        info: [
          {
            label: '返乡人数',
            value: fxrs || 0,
          },
          {
            label: '特殊人数',
            value: tsrq || 0,
          },
          {
            label: '31类人群',
            value: zdry || 0,
          },
        ],
      },
      {
        title: '防疫信息',
        info: [
          {
            label: '核酸采集量',
            value: hsTotal || 0,
          },
          {
            label: '核酸采集率',
            value: `${hsPercent || 0}%`,
          },
          {
            label: '阳性人员',
            value: yxry || 0,
          },
        ],
      },
      ...[
        props?.data?.level === 'town'
          ? {
              title: '下属单位',
              info: children || [],
              custom: true,
            }
          : {},
      ],
    ]
  })
}
</script>
<style lang="scss" scoped>
.moduleBox {
  width: 100%;
  min-height: 500px;

  .module {
    margin-bottom: 30px;

    &:last-child {
      margin-bottom: 0;
    }

    .module-title {
      font-size: 18px;
      font-weight: 400;
      margin-bottom: 12px;
      position: relative;
      padding-left: 12px;
      color: #333;
      // color: #3f9eff;
      &:before {
        width: 3px;
        border-radius: 2px;
        background: #3f9eff;
        height: 70%;
        top: 15%;
        left: 0;
        position: absolute;
        content: '';
      }
    }
    .info {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: -15px;
      padding-top: 10px;
      .info-item {
        width: 33.3%;
        display: flex;
        font-size: 16px;
        margin-bottom: 20px;
        .label {
          color: #999;
          width: 115px;
          // text-align: right;
        }
      }
    }

    .unit {
      padding-top: 10px;

      .label {
        display: inline-block;
        color: #999;
        font-size: 16px;

        &:not(:last-child) {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
